<template>
  <a-modal destroyOnClose v-model:open="visible" :span="24" :title="title" :width="720">
    <vxe-form ref="vxeFormRef" :data="formData" :items="formItems" :rules="formRules" :title-width="96">
      <template #name="scope">
        <a-input
          v-model:value="scope.data.name"
          @change="() => onUpdateVxeFormItemStatus(scope)"
          placeholder="请输入..."
        ></a-input>
      </template>
      <template #flag="scope">
        <a-input
          v-model:value="scope.data.flag"
          @change="() => onUpdateVxeFormItemStatus(scope)"
          placeholder="请输入..."
        ></a-input>
      </template>
      <template #enable="scope">
        <a-switch
          :checkedValue="1"
          :unCheckedValue="0"
          v-model:checked="scope.data.enable"
          checked-children="启用"
          un-checked-children="禁用"
        />
      </template>
      <template #remark="scope">
        <a-textarea
          v-model:value="scope.data.remark"
          @change="() => onUpdateVxeFormItemStatus(scope)"
          placeholder="请输入..."
        ></a-textarea>
      </template>
    </vxe-form>

    <template #footer>
      <a-button key="back" @click="onCancel">取消</a-button>
      <a-button key="submit" type="primary" :loading="loading" @click="onOk">确认</a-button>
    </template>
  </a-modal>
</template>

<script setup lang="ts">
import type { VxeFormPropTypes } from 'vxe-table'
import { add, modify } from '@render/service/FrontProjectService'
import { useAddModalHook } from '@render/hooks/AddEditModalHooks'

const $emits = defineEmits<{
  saveSuc: []
  editSuc: [val: Project]
}>()
const defaultFormData = {
  id: undefined,
  name: '',
  flag: '',
  enable: 1,
  remark: '',
}
const { vxeFormRef, visible, loading, formData, title, onCancel, onOk, onUpdateVxeFormItemStatus, onOpenModal } =
  useAddModalHook<Project>(defaultFormData, modify, add, $emits)
const formItems = ref<VxeFormPropTypes.Items>([
  { field: 'name', title: '项目名', span: 24, itemRender: {}, slots: { default: 'name' } },
  { field: 'flag', title: '唯一标识', span: 24, itemRender: {}, slots: { default: 'flag' } },
  { field: 'enable', title: '启用', span: 24, itemRender: {}, slots: { default: 'enable' } },
  { field: 'remark', title: '备注', span: 24, itemRender: {}, slots: { default: 'remark' } },
])
const formRules = ref<VxeFormPropTypes.Rules>({
  name: [{ required: true, message: '该项必填' }],
  flag: [{ required: true, message: '该项必填' }],
})

function openModal(_title: string, initData?: Project) {
  onOpenModal(_title, initData)
}

defineExpose({ openModal })
</script>

<style scoped></style>
